<template>
  <div class="profile">
    <div class="banner">
      <div class="container">
        <div class="avatar">
          <img :src="user.image||logo" :alt="user.username">
        </div>
        <h1>{{user.username}}</h1>
      </div>
    </div>
    <div class="container">
      <div class="tab">
        <div @click="changeTab(0)" :class="{current: tab === 0}">我的文章</div>
        <div @click="changeTab(1)" :class="{current: tab === 1}">收藏的文章</div>
      </div>
      <div class="tab-container">
        <div v-if="tab === 0">
          <template v-if="userArticles.length !== 0">
            <article-list :articles="userArticles" />
            <app-pagination
              :count="userArticlesCount"
              :curIdx="userPage"
              @changePage="userChangePage"
            />
          </template>
          <div class="empty" v-else>
            还没有发表文章
          </div>
        </div>
        <div v-if="tab === 1">
          <template v-if="favArticles.length !== 0">
            <article-list :articles="favArticles"/>
            <app-pagination
              :count="favArticlesCount"
              :curIdx="favPage"
              @changePage="favChangePage"
            />
          </template>
          <div class="empty" v-else>
            还没有收藏文章
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import ArticleList from 'src/components/ArticleList/index.vue'
  import AppPagination from 'src/components/common/AppPagination/index.vue'
  import { defineComponent, ref } from 'vue'
  import { useStore } from 'vuex'
  import logo from 'src/assets/logo.png'
  import useArticles from 'src/hooks/useArticles'
  export default defineComponent({
    components: {
      ArticleList,
      AppPagination
    },
    setup () {
      const store = useStore()
      const user = store.state.user
      //个人文章
      const {
        articles: userArticles,
        articlesCount: userArticlesCount,
        page: userPage,
        changePage: userChangePage,
        fetchArticles: fetchUserArticles
      } = useArticles('user', user.username)
      fetchUserArticles()

      //收藏文章
      const {
        articles: favArticles,
        articlesCount: favArticlesCount,
        page: favPage,
        changePage: favChangePage,
        fetchArticles: fetchFavArticles
      } = useArticles('fav', user.username)
      fetchFavArticles()

      const tab = ref<number>(0)
    
      const changeTab = (index: number) => tab.value = index

      return {
        user,
        logo,
        tab,
        changeTab,
        userArticles,
        userArticlesCount,
        userPage,
        userChangePage,
        favArticles,
        favArticlesCount,
        favPage,
        favChangePage
      }
    }
  })
</script>

<style lang="scss" scoped>
  .tab {
    margin: 20px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    div {
      padding: 10px 0;
      margin-right: 10px;
      cursor: pointer;
    }
    .current {
      border-bottom: 1px solid yellowgreen;
    }
  }
  .banner {
    height: 200px;
    background-color: #4a4266;
    .avatar {
      width: 80px;
      height: 80px;
    }
    .container {
      height: 100%;
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      h1 {
        font-size: 60px;
        color: white;
      }
    }
  }
  .empty {
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>